/* reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/*end reset*/


/****-----start-body----****/

.login-wrap {
  background: url(./images/bg1.jpg) no-repeat 0px 0px;
  font-family: 'Open Sans', sans-serif;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	min-height: 100vh;
	overflow: auto;
	padding-bottom: 40px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	>section{
		width: 100%;
		margin-top: -2%;
	}
  footer {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
    text-align: center;
    p {
      color: #fff;
      text-shadow: 0 0 2px #000;
    }
  }
  &.register-box {
    .login-form {
      width: 50%;
    }
	}
	
	.title {
		text-shadow: 0px 0px 2px #fff;
	}
	
	.wrap {
		margin: 0 auto;
		width: 80%;
	}
	
	body a,
	form li,
	input[type="submit"],
	.el-input__inner,
	.sixth-login input[type="submit"],
	.third-login input[type="submit"] {
		transition: 0.1s all;
		-webkit-transition: 0.1s all;
		-moz-transition: 0.1s all;
		-o-transition: 0.1s all;
	}
	
	
	/*--close--*/
	
	.register {
		cursor: pointer;
		width: 20px;
		height: 20px;
		position: absolute;
		left: 20px;
		top: 13px;
		-webkit-transition: color 0.2s ease-in-out;
		-moz-transition: color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out;
		color: #fff;
		font-size: 24px;
		animation: 1.5s register-color alternate infinite;
	}
	
	@keyframes register-color {
		from {
			color: #fff;
		}
		to {
			color: #19A974;
		}
	}
	
	
	/*--/close--*/
	
	h1 {
		font-family: 'Exo 2', sans-serif;
		text-align: center;
		padding-top: 2%;
		font-weight: 400;
		color: #2B2B36;
		font-size: 2em;
	}
	
	.login-form {
		background: #2b2b36;
		position: relative;
		width: 30%;
		margin: 2% auto 0 auto;
		text-align: center;
		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;
	}
	
	.head img {
		width: 100%;
	}
	
	.avtar img {
		margin: 2em 0 0;
	}
	
	.head-info {
		text-align: center;
		font-weight: 600;
		font-size: 2em;
		color: #fff;
		background: #23232e;
		height: 50px;
		border-top-left-radius: 10px;
		-webkit-border-top-left-radius: 10px;
		-moz-border-top-left-radius: 10px;
		-o-border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		-webkit-border-top-right-radius: 10px;
		-moz-border-top-right-radius: 10px;
		-o-border-top-right-radius: 10p
	}
	.el-form{
		margin: 10px auto;
		margin-bottom: 50px;
	}
	.el-form-item {
		color: #9199aa;
		font-size: 18px;
		font-weight: 100;
		border-bottom: 1px solid#484856;
		.el-input{
			.el-input__inner {
				background: transparent;
				outline: none;
				border: none;
				color: #fff;
			}
		}
		.material-icons{
			vertical-align: middle;
		}
	}
	
	.key {
		background: url(./images/pass.png) no-repeat 447px 17px;
	}
	
	input[type="submit"] {
		font-size: 30px;
		color: #fff;
		outline: none;
		border: none;
		background: #3ea751;
		width: 100%;
		padding: 18px 0;
		border-bottom-left-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-moz-border-bottom-left-radius: 15px;
		-o-border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		-webkit-border-bottom-right-radius: 15px;
		-moz-border-bottom-right-radius: 15px;
		-o-border-bottom-right-radius: 15px;
		cursor: pointer;
	}
	
	input[type="submit"]:hover {
		background: #ff2775;
		border-bottom-left-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-moz-border-bottom-left-radius: 15px;
		-o-border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		-webkit-border-bottom-right-radius: 15px;
		-moz-border-bottom-right-radius: 15px;
		-o-border-bottom-right-radius: 15px;
		transition: 1s all;
		-webkit-transition: 1s all;
		-moz-transition: 1s all;
		-o-transition: 1s all;
	}
	
	label.lbl-1 {
		background: #6756ea;
		width: 20px;
		height: 20px;
		display: block;
		float: right;
		border-radius: 50%;
		margin: 16px 10px 0px 0px;
	}
	
	label.lbl-2 {
		background: #ea569a;
		width: 20px;
		height: 20px;
		display: block;
		float: right;
		border-radius: 50%;
		margin: 16px 10px 0px 0px;
	}
	
	label.lbl-3 {
		background: #f1c85f;
		width: 20px;
		height: 20px;
		display: block;
		float: right;
		border-radius: 50%;
		margin: 16px 10px 0px 0px;
	}
	
	
	/*--copyrights--*/
	
	.copy-rights {
		text-align: center;
		margin-top: 8em;
	}
	
	.copy-rights p {
		color: #FFF;
		font-size: 1em;
		line-height: 1.8em;
	}
	
	.copy-rights p a {
		color: #ff2a75;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		text-decoration: none;
	}
	
	.copy-rights p a:hover {
		color: #3faa53;
		text-decoration: none;
		transition: 0.1s all;
		-webkit-transition: 0.1s all;
		-moz-transition: 0.1s all;
		-o-transition: 0.1s all;
	}
	
	
	/*--/copyrights--*/
	
	
	/*--start-responsive-design--*/
	
	@media (max-width:1440px) {
		.key {
			background: url(./images/pass.png) no-repeat 376px 17px;
		}
		body {
			min-height: 811px;
		}
	}
	
	@media (max-width:1366px) {
		.key {
			background: url(./images/pass.png) no-repeat 358px 19px;
		}
		.copy-rights {
			margin-top: 3em;
		}
		body {
			min-height: 768px;
		}
	}
	
	@media (max-width:1280px) {
		.key {
			background: url(./images/pass.png) no-repeat 336px 18px;
		}
		body {
			min-height: 711px;
		}
		.copy-rights {
			margin-top: 0.5em;
		}
	}
	
	@media (max-width:768px) {
		.login-form {
			width: 50%;
			margin: 12% auto 0 auto;
		}
		.key {
			background: url(./images/pass.png) no-repeat 342px 18px;
		}
		body {
			min-height: 929px;
		}
	}
	
	@media (max-width:640px) {
		.login-form {
			width: 60%;
			margin: 20% auto 0 auto;
		}
		.key {
			background: url(./images/pass.png) no-repeat 342px 19px;
		}
	}
	
	@media (max-width:480px) {
		.login-form {
			width: 80%;
		}
	}
	
	@media (max-width:320px) {
		h1 {
			padding-top: 1em;
			font-size: 1.5em;
		}
		.login-form {
			width: 90%;
			margin: 10% auto 0 auto;
		}
		.key {
			background: url(./images/pass.png) no-repeat 235px 27px;
		}
		.avtar img {
			margin: 1.1em 0 0;
		}
		.head-info {
			height: 35px;
		}
		label.lbl-1 {
			margin: 8px 10px 0px 0px;
		}
		label.lbl-2 {
			margin: 8px 10px 0px 0px;
		}
		label.lbl-3 {
			margin: 8px 10px 0px 0px;
		}
		.register {
			left: 16px;
			top: 8px;
		}
		.copy-rights {
			margin-top: 2em;
		}
		body {
			min-height: 504px;
		}
		input[type="submit"] {
			font-size: 28px;
			padding: 10px 0;
		}
	}

  .register-tips {
    box-shadow: 0 0 5px #fff;
    animation: 1s ease-in displaynone alternate infinite;
  }
  
  @keyframes displaynone {
    from {
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    to {
      opacity: 0;
    }
  }
}


/*--end-responsive-design--*/